<template>
    <div class="pay-container">
        <div class="erweima">
            <img :src="payUrl" alt="">
        </div>

        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wechat_pay"></use>
        </svg>
        <span>使用微信进行支付</span>

        <el-descriptions title="订单详情">
            <el-descriptions-item label="订单号">{{orderDetail.order_id}}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{orderDetail.create_time}}</el-descriptions-item>
            <el-descriptions-item label="产品名称">{{orderDetail.orderDetail[0].productName}}</el-descriptions-item>
            <el-descriptions-item label="商品描述">{{orderDetail.orderDetail[0].description}}</el-descriptions-item>
            <el-descriptions-item label="购买数量">{{orderDetail.orderDetail[0].quantity}}</el-descriptions-item>
            <el-descriptions-item label="购买用户"></el-descriptions-item>
            <el-descriptions-item label="手机号"></el-descriptions-item>
            <el-descriptions-item label="总价格">{{orderDetail.total_fee}}</el-descriptions-item>
        </el-descriptions>
        
    </div>
    
</template>

<script>
    import qrCode from "qrcode"

    import * as api from "@/api/transaction"
    export default{
        data(){
            return{
                order_id:"",

			    orderDetail: {

				orderDetail: [
					{
						productName: "",
						description: "",
						quantity: "",
					},
				],
			},
                payUrlRes: {}, 
                payUrl: "", 
            }
        },
        computed:{

        },
        created () {
            let { order_id } = this.$route.query
            this.order_id = order_id
            if(!this.order_id){
                this.$alert("本次交易取消,请重新提交","提示",{
                    confirmButtonText: "确定",
                    callback:(action) => {
                        this.$router.push({path:"/preorder"})
                    }
                })
                return;
            }


            Promise.all([
            api.getOrderDetail(this.order_id),
            api.pay(this.order_id)])
            .then(res => {
                console.log(res);
                this.orderDetail = res[0].data.data;
                let paymentRes = res[1].data;
                if(paymentRes.state){

                    let payUrl = paymentRes.code_url;

                    qrCode.toDataURL(payUrl,(err,img) => {
                        console.log(img);
                        this.payUrl = img;
                    })
                }
            })

            this.queryPayStatusInterval = setInterval(() => {
                api.queryPayStatus(this.order_id)
                    .then(res => {
                        console.log(res);
                        if (res.data.state) {

                            this.$router.push({ path: "/payment/paysuccess" })
                        }
                    })
            },2000)
        },
        beforeDestroy(){
            clearInterval(this.queryPayStatusInterval)
        }
    }
</script>



<style lang="less" scoped>
.erweima{
    text-align: center;
    img{
        width: 148px;
        height: 148px;
    }
}
</style>